<template>
  <ul class="home">
    <li
      v-for="item in movieList"
      :key="item.id"
      @click="ticketPurchaemse(item.id)"
    >
      <img :src="item.img | wh('128.180')" />
      <div class="movie-content">
        <h3>
          {{ item.nm }}
        </h3>
        <p>
          评分 <strong>{{ item.sc }}</strong>
        </p>
        <p>{{ item.star }}</p>
        <p>{{ item.showInfo }}</p>
      </div>
      <button v-show="item.globalReleased">购票</button>
      <button v-show="!item.globalReleased" style="background: #3c9fe6">
        预售
      </button>
    </li>
  </ul>
</template>

<script>
import { getMovie } from '@/api/movie'
export default {
  name: 'Home',
  data() {
    return {
      movieList: [],
    }
  },
  created() {
    getMovie().then((data) => {
      this.movieList = data.data.movieList
    })
  },
  methods: {
    ticketPurchaemse(id) {
      this.$router.push('/detail?id=' + id)
    },
  },
}
</script>

<style lang="less" scoped>
ul {
  padding: 0 24px;
  li {
    height: 220px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    img {
      width: 128px;
      height: 180px;
    }
    .movie-content {
      width: 420px;
      height: 220px;
      font-size: 14px;
      h3 {
        margin: 0;
        font-size: 16px;
        height: 80px;
        line-height: 80px;
      }

      p {
        margin: 0;
        height: 42px;
        width: 420px;
        color: #666;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;

        strong {
          color: #faaf00;
        }
      }
    }
  }
  button {
    height: 60px;
    width: 100px;
    color: #fff;
    background: #f03d37;
    border: none;
    border-radius: 12%;
  }
}
</style>
